<%@ page import="java.util.HashMap" %>
<%@ page import="java.util.Map" %>
<%@ page import="java.util.ArrayList" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
  <title>c:forEach 标签实例</title>
  <script src="${pageContext.request.contextPath}/webjars/jquery/3.7.1/jquery.min.js"></script>
  <script src="${pageContext.request.contextPath}/webjars/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
  <link rel="stylesheet" href="${pageContext.request.contextPath}/webjars/bootstrap/5.1.3/css/bootstrap.min.css"/>
</head>
<body>
<c:forEach var="i" begin="0" end="2" step="1" varStatus="loop">
Item <c:out value="${i}"/><p>索引为${loop.index}，这是第${loop.count}次循环</p>
  </c:forEach>
<hr>
<%
  //    String数组中的元素
  String[] fruits={"apple","orange","grape","banana"};
%>
<div class="container mt-3">
  <h4>String数组中的元素：</h4>
  <form action="c_forEach.jsp">
    <c:forEach var="name" items="<%=fruits %>" varStatus="loop">
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="${loop.count}" name="ocheckbox" value="${name}" />
        <label class="form-check-label" for="${loop.count}">${name}</label>
      </div>
    </c:forEach>
    <button type="submit" class="btn btn-primary mt-3">提交</button>
  </form>
  <p>
    我喜欢的水果是：<br/>
    <c:forEach var="selectedFruit" items="${paramValues.ocheckbox}">
      ${selectedFruit}<br/>
    </c:forEach>
  </p>
</div>
<hr/>
<%--模仿以上案例，循环12生肖，选择打印出自己的生肖。--%>

<%
  //    HashMap集合中的元素
  Map userMap=new HashMap();
  userMap.put("1","Tom");
  userMap.put("2","Make");
  userMap.put("3","Lina");
%>

<div class="container mt-3">
  <h4>HashMap集合中的元素：</h4>
  <form action="c_forEach.jsp">
    <select name="uname" multiple>
        <c:forEach items="<%=userMap%>" var="item" varStatus="loop">
          <option value="${item.value}">${item.value}</option>
        </c:forEach>
    </select>
    <button type="submit" class="btn btn-primary mt-3">提交</button>
  </form>
  <p>
    我的英文名称是：<br/>
    ${param.uname}
<%--    多选显示--%>
    <c:forEach var="selectedStu" items="${paramValues.uname}">
      ${selectedStu}<br/>
    </c:forEach>
  </p>
</div>
<hr>
<%
  //    ArrayList集合（指定迭代范围和步长）
  ArrayList colorsList=new ArrayList();
  colorsList.add("red");
  colorsList.add("yellow");
  colorsList.add("blue");
  colorsList.add("green");
  colorsList.add("black");
%>
<div class="container mt-3">
  <h4>ArrayList集合：</h4>
  <form action="c_forEach.jsp">
    <c:forEach var="color" items="<%=colorsList%>" begin="1" end="3" step="2" varStatus="loop">
      <div class="form-check">
        <input type="radio" class="form-check-input" id="${loop.index}" name="optradio" value="${color}">
        <label class="form-check-label" for="${loop.index}">${color}</label>
      </div>
    </c:forEach>
    <button type="submit" class="btn btn-primary mt-3">提交</button>
  </form>
  <p>我喜欢的颜色是：${param.optradio}</p>
</div>


</body>
</html>

